
<!-- 预约记录 -->
<template>
	<div class="container">

		<div>
			<div class="from">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item>
						<el-select v-model="tableData.coachName" placeholder="请选择课程教练">
							<el-option
                  v-for="item in coachList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id"
                />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" class="inquire" :icon="Search">查询</el-button>
					</el-form-item>

					
				</el-form>
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item>
						<!-- CoachCheckinView -->
						<router-link to="/CoachCheckinView"><el-button type="primary"
								class="inquire">教练签到</el-button></router-link>
					</el-form-item>
				</el-form>
			</div>

			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="name" label="课程名称" width="250" />
				<el-table-column prop="coachName" label="教练" width="250" />
				<el-table-column prop="venueName" label="场馆" width="300" />
				<el-table-column prop="dateRange" label="课程时间" width="300" />
				<el-table-column prop="bookPeople" label="预约人数" width="250" />
				<el-table-column label="操作" width="300">
					<template #default="s">
						<router-link :to="'/AppointmentView?scheduleId=' + s.row.scheduleId"><el-button class="operation"
								type="primary">预约记录</el-button></router-link>
					</template>
				</el-table-column>
			</el-table>

		</div>
		<div class="fenye">
			<el-pagination class="fenye" background layout="prev, pager, next" :page-size="form.limit"
				:current-page="currentPage.value" :total="form.total" @current-change="pageChange">
			</el-pagination>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { Search } from '@element-plus/icons-vue';//icon图标
import Group from "../store/GroupStore";
import { GroupHooks, Groups } from "../hooks/GroupHooks";
const form = reactive({
	coachId: 0,
	limit: 5,
	page: 1,
	// total:0
});

const _GroupHooks: Groups = GroupHooks()
_GroupHooks.GroupList(form.coachId, form.limit, form.page, getGroup)
const tableData = ref<Array<any>>([])
function getGroup(data:any) {//
	// const store = Group()
	tableData.value = data
	console.log(tableData.value)
	// form.total = count
}
const currentPage = ref("");

const pageChange = (val: any): void => {
  currentPage.value=val
};


//教练接口
_GroupHooks.getCoachList(coachData)
const coachList=ref<Array<any>>([])
function coachData(data:any){
   coachList.value=data
 }
</script>
<style type="text/css" scoped>
.from {
	display: flex;
	justify-content: space-between;
}

.tab {
	margin-bottom: 20px;
}

>>>th div {
	text-align: center;
}

>>>td div {
	text-align: center;
}

.fenye {
	margin-top: 10px;
	display: flex;
	justify-content: flex-end;
}

.tk {
	width: 150px;
	height: 40px;
	margin: 20px 10px 20px 20px;

}

.inquire {
	width: 100px;
	height: 35px;
	margin: 0 5px;
}

.operation {
	margin-right: 5px;
}</style>